<template>
  <view class="page">
    <scroll-view class="scroll" scroll-x="true">
      <view class="item" v-for="(item, index) in items" :key="index">
        <view class="title">{{item.title}}</view>
        <view class="amount-wrap">
          <view>数量：</view>
          <view>
            <text v-if="!item.isInput" @click="showInput(index)">{{item.amount}}</text>
            <input type="number" v-model="item.amount" v-if="item.isInput" :focus="true" @blur="hideInput(index)" />
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        items: [{
            title: "JavaScript",
            amount: 1,
            isInput: false
          },
          {
            title: "VUE",
            amount: 1,
            isInput: false
          },
          {
            title: "React",
            amount: 1,
            isInput: false
          }
        ]
      };
    },
    methods: {
      showInput(index) {
        this.items[index].isInput = true;
        this.$set(this.items, index, this.items[index])
      },
      hideInput(index) {
        this.items[index].isInput = false;
        this.$set(this.items, index, this.items[index])
      }
    }
  }
</script>

<style lang="scss">
  .page {
    width: 100%;
    height: auto;
    background-color: aqua;
  }

  .item {
    width: 100%;
    height: auto;
    margin: 20rpx;
    font-size: 28rpx;
  }

  .amount-wrap {
    width: 100%;
    display: flex;
  }

  .amount-wrap text,
  .amount-wrap input {
    padding: 0 20rpx;
  }

  .scroll {
    width: 100%;
    height: 500rpx;
  }
</style>